<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>套牌车稽查系统</title>
    <meta name="description" content="this is a demo for fake plate car query">
    <meta name="author" content="Bing">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <style>
        body {
            display: flex;
            font-family: Arial, sans-serif;
        }
       .sidebar {
            width: 200px;
            height: 600px;
            background-color: #343a40;
            color: #fff;
            padding: 20px;
        }
       .sidebar ul {
            list-style-type: none;
            padding: 0;
        }
       .sidebar li {
            padding: 10px 0;
            cursor: pointer;
        }
       .sidebar li a{
           color: #fff;
           text-decoration: none;
       }
       .sidebar li:hover {
            background-color: #454e56;
        }
       .content-area {
            flex-grow: 1;
            padding: 20px;
        }
       .hidden {
            display: none;
        }
        #previewContainer img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body onload="showSection('service-prepare')">
<div class="sidebar">
    <ul>
        <li onclick="showSection('service-prepare')">服务准备</li>
        <li onclick="showSection('upload-predict')">上传&预测</li>
    </ul>
</div>
<div class="content-area">
    <div id="service-prepare">
        <!-- 服务准备内容 -->
        <h2>服务准备页面内容</h2>
        <img src="/static/images/index01.jpg">
    </div>
    <div id="upload-predict" class="hidden">
        <!-- 上传&预测内容 -->
        <form id="uploadForm" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <small></small>
                <input type="file" name="file" class="form-control" id="fileInput" aria-describedby="emailHelp"
                       onchange="displaySelectedImage()">
                <small id="emailHelp" class="form-text text-muted">上传一张车辆卡口图片</small>
            </div>
            <button type="submit" class="btn btn-primary" onclick="analyzeImage(event)">开始分析</button>
        </form>
        <div id="previewContainer">
            <img class="img-fluid"
                 id="preview"
                 src="{% if image_url %}{{ url_for('static', filename=image_url.split('static/')[1]) }}{% else %}#{% endif %}"
                 alt="图片预览"
                 style="max-width: 100%; margin-bottom: 10px;">
        </div>
        <div id="results-content">
            <ol class="list-group">
                {% for value in context %}
                    <li class="list-group-item">
                        {{value}}
                    </li>
                {% endfor %}
            </ol>
        </div>
    </div>
</div>
<script>
    function showSection(sectionId) {
        const sections = document.querySelectorAll('.content-area > div');
        sections.forEach(section => section.classList.add('hidden'));
        document.getElementById(sectionId).classList.remove('hidden');

    }
    function displaySelectedImage() {
        const fileInput = document.getElementById('fileInput');
        const previewImg = document.getElementById('preview');
        if (fileInput.files.length > 0) {
            const reader = new FileReader();
            reader.onload = function (e) {
                previewImg.src = e.target.result;
                previewImg.style.display = 'block';
            };
            reader.readAsDataURL(fileInput.files[0]);
        } else {
            previewImg.style.display = 'none';
        }
    }
    function analyze(event) {
    event.preventDefault();
    const formData = new FormData(document.getElementById('uploadForm'));
    fetch('/analyze', {
        method: 'POST',
        body: formData
    })
   .then(response => response.json())
   .then(data => {
        if ('error' in data) {
            console.error(data.error);
        } else {
            const resultsContent = document.getElementById('results-content');
            resultsContent.innerHTML = '';
            resultsContent.innerHTML += `<li class="list-group-item">车牌号：${data.plateNo}</li>`;
            resultsContent.innerHTML += `<li class="list-group-item">车型：${data.vType}</li>`;
            resultsContent.innerHTML += `<li class="list-group-item">车辆颜色：${data.vColor}</li>`;
            resultsContent.innerHTML += `<li class="list-group-item">车辆品牌：${data.carBrand}</li>`;
            resultsContent.innerHTML += `<li class="list-group-item">结论：${data.predictResult}</li>`;
        }
    })
   .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });
}
</script>
</body>
</html>